<template>
  <div class="app-container">
    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="14">
          <el-tabs v-model="activeName" @tab-click="tabChange">
            <el-tab-pane label="主码流" name="main"></el-tab-pane>
            <el-tab-pane label="子码流" name="sub"></el-tab-pane>
          </el-tabs>
              <el-form-item label="码流类型" hidden>
                <el-radio-group @change="osdTypeChange" v-model="form.osd_code_stream">
                  <el-radio :label="1">主码流</el-radio>
                  <el-radio :label="2">子码流</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="osd叠加显示">
                <el-select @change="fontColorChange" v-model="form.osd_show" placeholder="请选择">
                  <el-option label="关闭" :value="0">关闭</el-option>
                  <el-option label="打开" :value="1">打开</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="字体大小" prop="osd_font_size">
                <el-tooltip class="item" effect="dark" content="10 ~ 100" placement="top-start">
                  <el-input class="fontSize" clearable v-model="form.osd_font_size"></el-input>
                </el-tooltip>
              </el-form-item>
              <el-form-item label="字体颜色">
                <el-select @change="fontColorChange" v-model="form.osd_font_color" placeholder="请选择">
                  <el-option label="自动" :value="0">自动</el-option>
                  <el-option label="白色" :value="1">白色</el-option>
                  <el-option label="黑色" :value="2">黑色</el-option>
                </el-select>
              </el-form-item>

              <el-row :key="item.key" v-for="(item,index) in form.osd_content">
                <el-col  :xs="24" :sm="10" :md="10" :lg="10">
                  <el-form-item :label="'叠加内容'+(index+1)"
                                :prop="'osd_content.'+index+'.osd_character'"
                                :rules="rules.osd_character"
                  >
                    <el-tooltip class="item" effect="dark" content="中文 英文 数字，1 ~ 16位" placement="top-start">
                      <el-input clearable class="" maxlength="16" show-word-limit v-model="item.osd_character" placeholder="叠加内容"></el-input>
                    </el-tooltip>
                  </el-form-item>
                </el-col>
                <el-col  :xs="10" :sm="6" :md="6" :lg="6">
                  <el-form-item label="x" :prop="'osd_content.'+index+'.osd_character_pos.xpos'" :rules="rules.xpos">
                    <el-tooltip class="item" effect="dark" content="0 ~ 800" placement="top-start">
                      <el-input clearable class="" v-model="item.osd_character_pos.xpos" placeholder="x"></el-input>
                    </el-tooltip>
                  </el-form-item>
                </el-col>
                <el-col  :xs="10" :sm="6" :md="6" :lg="6">
                  <el-form-item label="y" :prop="'osd_content.'+index+'.osd_character_pos.ypos'" :rules="rules.ypos">
                    <el-tooltip class="item" effect="dark" content="0 ~ 600" placement="top-start">
                      <el-input clearable class="" v-model="item.osd_character_pos.ypos" placeholder="y"></el-input>
                    </el-tooltip>
                  </el-form-item>
                </el-col>
                <el-col :xs="2" :sm="2" :md="2" :lg="2" v-show="index==0">
                  <el-tooltip class="item" effect="dark" content="增加一行" placement="top-start">
                    <el-button type="success" size="mini" @click="addRow" class="toolBtn" icon="el-icon-plus" circle></el-button>
                  </el-tooltip>

                  <!--<el-button style="margin-left: 10px;">删除</el-button>-->
                </el-col>
                <el-col :xs="2" :sm="2" :md="2" :lg="2" v-show="index>0">
                  <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                    <el-button type="danger" size="mini" @click="deleteRow(index)" class="toolBtn" icon="el-icon-delete" circle></el-button>
                  </el-tooltip>

                  <!--<el-button style="margin-left: 10px;">删除</el-button>-->
                </el-col>

              </el-row>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="SetVideoOSDParam">保存</el-button>
        <!--<el-button type="warning" @click="addRow">增加一行</el-button>-->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
    export default {
        name: "osdParameters",
      data:function () {
        var validateFontSize = (rule, value, callback) => {
          var reg=/^[0-9]+$/
          if (value === '') {
            callback(new Error('请输字体大小'));
          } else if(!reg.test(value)||value<10||value>100) {
            callback(new Error('只能输入 10 ~ 100 之间的整数'));
          }else{
            callback();
          }
        };
        var validateCharacter = (rule, value, callback) => {
          // debugger
          var reg=/^[0-9a-zA-Z\u4e00-\u9fa5]{1,16}$/
          console.log(value);
          if (value === '') {
            callback(new Error('请输叠加内容'));
          } else if(!reg.test(value)) {
            callback(new Error('只能输入 中文、英文、数字，1 ~ 16位'));
          }else{
            callback();
          }
        };
        var checkX = (rule, value, callback) => {
          // debugger
          if (value === '') {
            callback(new Error('请输 X坐标'));
          } else if(value<0||value>800) {
            callback(new Error('只能输入0~800'));
          }else{
            callback();
          }
        };
        var checkY = (rule, value, callback) => {
          // debugger
          if (value === '') {
            callback(new Error('请输 Y坐标'));
          } else if(value<0||value>600) {
            callback(new Error('只能输入0~600'));
          }else{
            callback();
          }
        };
        return{
          activeName:'main',
          form:{
            osd_code_stream:1,
            osd_font_size:10,
            osd_font_color:1,
            osd_show:1,
            osd_content:[
              {
                osd_character:"盛视科技-主码流",
                osd_character_pos:{
                  xpos:1,
                  ypos:1
                },
              }
            ]
          },
          rules: {
            osd_font_size: [
              { validator: validateFontSize, trigger: 'change' }
            ],
            osd_character: [
              { validator: validateCharacter, trigger: 'change' }
            ],
            xpos: [
              { validator: checkX, trigger: 'change' }
            ],
            ypos: [
              { validator: checkY, trigger: 'change' }
            ]
          }
        }
      },methods:{
        tabChange:function(object){
          this.osdTypeChange(object.index*1+1)
        },
        osdTypeChange:function(value){
          console.log(value);
          this.GetVideoOSDParam(value)
        },
        GetVideoOSDParam:function(type){
          var _this=this
            this.form.osd_code_stream=type?type:1
          _this.postAjax({
            method:'GetVideoOSDParam',
            params:{
              osd_code_stream:type||1
            }
          }).then(function (res) {
            console.log(res);
            if(res.result==0){
              var data=res.params
              // debugger
              // _this.form.osd_code_stream=data.osd_code_stream
              _this.form.osd_font_size=data.osd_font_size
              _this.form.osd_font_color=data.osd_font_color
              _this.form.osd_show=data.osd_show
              _this.form.osd_content=data.osd_content

            }else{
              _this.tips(res.errorInfo.detail,'error')
            }
          }).catch(function (err) {
            console.log(err);
          }).finally(function (fn) {
            console.log(fn);
          })
        },
        SetVideoOSDParam:function () {
          var _this=this
          this.$refs['form'].validate((valid) => {
            if (valid) {
              for(var i=0;i<this.form.osd_content.length;i++){
                this.form.osd_content[i].osd_character_pos.xpos*=1
                this.form.osd_content[i].osd_character_pos.ypos*=1
              }
              _this.loading=true
              _this.postAjax({
                method:'SetVideoOSDParam',
                params:{
                  osd_code_stream:_this.form.osd_code_stream,
                  osd_font_size:_this.form.osd_font_size*1,
                  osd_font_color:_this.form.osd_font_color,
                  osd_show:_this.form.osd_show,
                  osd_content:_this.form.osd_content,
                }
              }).then(function (res) {
                console.log(res);
                if(res.result==0){
                  _this.tips('保存成功','success')
                }else {
                  _this.tips(res.errorInfo.detail,'error')
                }
              }).catch(function (err) {
                console.log(err);
              }).finally(function (fn) {
                _this.loading=false
                console.log(fn);
              })
            }else{
              return false;
            }
          })
        },
        deleteRow:function(rowIndex){
          this.form.osd_content.splice(rowIndex,1)
          console.log(rowIndex);
        },
        addRow:function(){
          if(this.form.osd_content.length<12){
            this.form.osd_content.push({
              osd_character:"叠加内容",
              osd_character_pos:{
                xpos:0,
                ypos:0
              },
              key:Date.now()
            })
          }else{
            this.tips('最多只能添加 12 条叠加内容','error')
          }

        },
        fontColorChange:function (value) {
          console.log(this.form.osd_font_color);
        }
      },mounted:function () {
        this.GetVideoOSDParam()
      }
    }
</script>

<style scoped>
  .toolBtn{
    margin-left: 10px;
    position: relative;
    top:5px;
  }
  .box-card{
    margin-bottom: 20px;
  }
.fontSize{
  width: 200px;
}
</style>
